<template>
	<section id="page">
			<!--<div class="header_tit">
				<div class="back_btn" @click="back()"></div>
				<h3>{{name}} </h3>
			</div>-->
			<div class="download">
				<em></em>
				<p>同步课堂</p>
				<p class="little">您身边的教育专家</p>
				<a href="javascript:;" class="btn_vote">免费下载</a>
			</div>
			<article>
				
				<div class="circleProgress_wrapper">
					<canvas id="can" width='100%' height="100%" ></canvas>
					<div :class="{'state': isA,'on':!isA}" @click="change_bg()"></div>
				</div>
				<h3>作品名称：{{name}} </h3>
				<a href="javascript:;" class="thumb" @click="vote_btn()">投他一票<em></em></a>
			</article>
			<audio id="audio" src="../../../static/vedio/1.mp3"></audio>
		</section>
</template>

<script type="text/ecmascript-6">
	import searchToMap from '@/utils/searchToMap'
	export default {
		data(){  
        return {
            isA:true,
            name:'',
            url:'',
            irID:'',
            stuID:'',
            openDate:''
        	};  
    	},  
		created() {
			this.$store.commit('hidefooter');
			var search=searchToMap();
			if(search && search.title && search.url &&search.chid){
				this.name=search.title;
				this.url=search.url;
				this.irID=search.chid;
				this.stuID=search.stu_id;
				this.openDate=search.openDate;
			}			
		},
		methods: {
			back() {
				this.$router.go(-1);
			},
			change_bg(){
				var per = 1;
				var a_time = 0;
				var audio = document.getElementById("audio");
					a_time = audio.duration;
				var cans = document.getElementById('can');
				var ctx = cans.getContext('2d');
				var wid = cans.width;
				var hei = can.height;
				var c_width = cans.width / 2;
				console.log(c_width)
				var sid = null;
				function startPlay() {
					sid = setInterval(function() {
						per = Math.floor(audio.currentTime / a_time * 360);
						if(per < 360) {
							drawCirc(per);
						} else {
							clearInterval(sid);
						}
					}, 50);
				}
				function drawCirc(deg) {
					ctx.clearRect(0, 0, wid, hei);
					ctx.beginPath();
					ctx.strokeStyle = "#ffd56b";
					ctx.lineWidth = 10;
					ctx.arc(c_width, c_width, c_width - 5, 0, Math.PI / 180 * deg, false);
					ctx.stroke();
					ctx.closePath();
				}
				this.isA=!this.isA;
				if(this.isA==false){
					startPlay();
					audio.play();
				}else{
					clearInterval(sid);
					audio.pause();
				
				}
		
			},
			vote_btn(){
				this.$http.post(domain + '/API/SummerAct/VoteRecord', {		
						'textCode':this.irID,
						'stuID': this.stuID,
						'openDate': this.openDate,
						'votersID':0,
						'voterName':'',
						'vterDate':new Date().Format('yyyy-MM-dd hh:mm:ss'),
						'strIp':returnCitySN["cip"]
				}).then(res => {
					let hv=res.body.isHasVoted;
					let ho=res.body.isHasOver;
					let sucs=res.body.success;
					if(hv==false&&ho==true&&sucs==true){
						layer.tips('投票成功')
					}
					if(hv==true&&ho==true){
						layer.tips('您今天已经投票5次了')
					}
					
				});
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/scss/_mixin";
body {
    color: #333;
    background-color: #f9ead4;
}

a {
    color: #555;
}
#page{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #f9ead4;
}
.header_tit{
	width: 720px/$ppr;
	height: 96px/$ppr;
	background-color: #56af00;
	.back_btn {
		width: 64px/$ppr;
		height: 64px/$ppr;
		background-image: url(./img/back2.png);
		background-size: 100% 100%;
		position: absolute;
		left: 24px/$ppr;
		top: 16px/$ppr;
	}
	h3{
		color: #FFFFFF;
		text-align: center;
		line-height: 96px/$ppr;
	}
}
.download {
    height: 160px/$ppr;
    background-color: #FFFFFF;
    border-bottom:1px solid #dcdcdc;
    position: relative; 
    em {
        display: inline-block;
        width: 120px/$ppr;
        height: 120px/$ppr;
        background: url(./img/read_13.png);
        background-size: 120px/$ppr 120px/$ppr;
        position: absolute;
        top: 30px/$ppr;
        left: 25px/$ppr;
    }
    p {
        font-size: 32px/$ppr;
        color: #333;
        text-indent: 160px/$ppr;
        top: 40px/$ppr;
        position: relative;
        &.little {
            color: #999;
            font-size: 28px/$ppr;
            margin-top: 10px/$ppr;
        }
    }
    a {
        width: 180px/$ppr;
        height: 60px/$ppr;
        line-height: 60px/$ppr;
        color: #FFFFFF;
        text-align: center;
        display: block;
        border-radius: 30px/$ppr;
        border: #ff6611 solid 1px;
        font-size: 28px/$ppr;
        position: absolute;
        right: 25px/$ppr;
        top: 50px/$ppr;
        background-color: #ff6600;
    }
}

article {
	
    margin-top: 70px/$ppr;
    text-align: center;
    h3 {
        font-size: 32px/$ppr;
        color: #333;
        line-height: 50px/$ppr;
        font-weight: 800;
        margin-bottom: 30px/$ppr;
    }
     .thumb{
     	margin: 0 auto;
    	margin-top: 30px/$ppr;
    	display: block;
		background-color: #56af00;
		width: 194px/$ppr;
		height: 82px/$ppr;
        color: #FFFFFF;
        font-size: 30px/$ppr;
        line-height: 82px/$ppr;
        border-radius: 41px/$ppr;
    }
}

.circleProgress_wrapper { 
	
    width: 175px/$ppr;
    height: 175px/$ppr;
    position: relative;
    margin: 0 auto;
    margin-top: 150px/$ppr;
    margin-bottom: 36px/$ppr;
    background: #dedede;
    border-radius: 50%;
    box-sizing: border-box;
    div{
    	width: 140px/$ppr;
        height: 140px/$ppr;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        z-index: 2;
    }
    .state {
        background: url(./img/start.png);
        background-size: 140px/$ppr 140px/$ppr;
    }
    .on {
        background:url(./img/pause.png) !important;
        background-size: 140px/$ppr 140px/$ppr !important;
      
    }
    #can {
        width: 170px/$ppr;
        height: 170px/$ppr;
        position: absolute;
        overflow: hidden;
        z-index: 1;
        left: 0;
        top: 0;
    }
   
}
</style>